<template>
  <div class="mx-auto max-w-3xl w-full">
    <!-- 性能图表 -->
    <div class="rounded-lg shadow-inner">
      <TypingStatsChart />
      <div class="mt-4 gap-4 grid grid-cols-2">
        <div class="p-2 rounded-md bg-gray-700 bg-opacity-30 flex items-center">
          <div class="mr-2 rounded-full bg-purple-500 h-3 w-3"></div>
          <span class="text-sm text-gray-300">
            平均速度:
            <span class="text-purple-400 font-bold">{{ typingStore.averageWpm }} WPM</span>
          </span>
        </div>
        <div class="p-2 rounded-md bg-gray-700 bg-opacity-30 flex items-center">
          <div class="mr-2 rounded-full bg-purple-500 h-3 w-3"></div>
          <span class="text-sm text-gray-300">
            最高速度:
            <span class="text-purple-400 font-bold">{{ typingStore.maxWpm }} WPM</span>
          </span>
        </div>
        <div class="p-2 rounded-md bg-gray-700 bg-opacity-30 flex items-center">
          <div class="mr-2 rounded-full bg-green-400 h-3 w-3"></div>
          <span class="text-sm text-gray-300">
            准确率:
            <span class="text-green-400 font-bold"> {{ typingStore.accuracy }}% </span>
          </span>
        </div>
        <div class="p-2 rounded-md bg-gray-700 bg-opacity-30 flex items-center">
          <div class="mr-2 rounded-full bg-orange-500 h-3 w-3"></div>
          <span class="text-sm text-gray-300">
            输入/错误输入/错误字符:
            <span class="text-white font-bold"> {{ typingStore.totalTypedChars }} </span> /
            <span class="text-orange-400 font-bold"> {{ typingStore.totalErrorCount }} </span> /
            <span class="text-red-400 font-bold"> {{ typingStore.totalErrorChars }} </span>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { useTypingStore } from '@renderer/store/modules/typing.store'
  import TypingStatsChart from './TypingStatsChart.vue'

  const typingStore = useTypingStore()
</script>
